<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>controlModalTest.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    
    <link rel="stylesheet" type="text/css" href="../../../main/webapp/css/style.css">
	<script src="../../../main/webapp/javascript/prototype.js"></script>
	<script src="control.modal.js"></script>

  <style type="text/css">
	.linkbox {
	background-color: white;
	width: 420px;
	border: thin solid #e0e0e0;
	padding: .4em;
	}
	.linkbox .textinput {
	width: 400px;
	}
	.linkbox .label {
	margin: 0;
	padding:1em 0 .2em 0;
	}
	.helpbox {
	background-color: white;
	width: 250px;
	border: thick solid #e0e0e0;
	}
	.helpbox .hd, .linkbox .hd  {
	border-bottom: 1px solid #e0e0e0;
	font-size: 16px;
	font-style: italic;
	font-weight: bold;
	padding: 0 0 2px 24px;
	margin: .2em;
	background-color: white;
	background: url(22xhelp.gif) no-repeat;
	}
	.helpbox .tl, .linkbox .tl {
	padding: 0;
	float:right;
	}
	.helpbox .bd, .linkbox .bd {
	float:none;
	margin: .4em;
	padding: 0;
	}
	.helpbox ul {
	margin-left:10px;
	padding-left:10px;
	margin-top:.2em;
	}
	.helpbox li {
	margin-left:5px;
	padding-left:5px;
	}	 
  </style>
	<script type="text/javascript">
	
	function init() {
    document.getElementsByClassName('link_help').each(function(link){
        new Control.Modal(link, {
				containerClassName: 'helpbox',
        opacity: 0.2,
        position: 'relative', 
        offsetLeft: 20, 
        offsetTop: 20
        });
    });
    modal2 = new Control.Modal('link_linkhere',{
				containerClassName: 'linkbox',
        opacity: 0.2,
        position: 'relative', 
        offsetLeft: -400, 
        offsetTop: 20
        });
		new Control.Modal('span_example',{
				position: 'relative',
				offsetLeft: 120,
				contents: '<div id="help_time" class="helpbox">Control.Modal can attach to any element.</div>'
		});
	}
	
	function selectThis(element) {
		element.focus();
		element.select();
	}
	
		
	</script>
</head>
  
<body onLoad="init()">

	<a href="#modal_contents" class="link_help">Simple Modal Link</a> | 
	<a href="#help_time" class="link_help">When hint</a> | 
	<span id="span_example">&lt;span&gt; Hoverbox</span>
	<div style="float:right">
	<a href="#linkhere" id="link_linkhere">link here</a>  
	</div>


<div id="linkhere" class="linkbox">
    <div class='bd' style="margin:0; padding:0;">
    	<div class="tl"><a href="#" onClick="Control.Modal.close(); return false;"><img src="12xclose.gif"></img></a></div>
    	<div class="label">Paste this text to link back to this map!</div>
      <input id="linkhere_url" type="text" class="textinput" onclick="selectThis(this);" value="http://www.map4d.com/search/eventsearch.htm?_where=london,%20england&_what=%22kensington%20palace%22&_zoom=17&_maptype=1"/>
    	<div class="label">Paste this text to embed this map into a web page!</div>
      <input type="text" class="textinput" onclick="selectThis(this);" value="&lt;iframe src='http://www.map4d.com/search/eventsearch.htm?_where=london,%20england&_what=%22kensington%20palace%22&_zoom=17&_maptype=1"/>
    </div>
</div>

<div id="help_time" class="helpbox">
		<div class="hd">
    	<span class="tl"><a href="#" onClick="Control.Modal.close(); return false;"><img src="12xclose.gif"></img></a></span>
      Time Ranges
    </div>
    <div class='bd'>
      Examples of valid time ranges are:
      <ul>
        <li>1992</li>
        <li>430 BC</li>
        <li>2000-2006</li>
        <li>Feb 1884 - Jan 1886</li>
        <li>June 22, 1992 12am - June 30, 1992</li>
        <li>October 1992</li>
        <li>Oct 12, 1992, 12:23:05 am</li>
      </ul>
    </div>
</div>

<div id="modal_contents">
	<div class="nav">
		<ul><li><a href="#" onClick="Control.Modal.close(); return false;">CLOSE X</a></li></ul>
	</div> 
	<div class="modalForm">
		<h2>Flag an Event</h2>
  	<table>
  		<tr>
  			<td colspan="2">
  			Before flagging a item, please review the 
  			<a href="#" onClick="alert('Not Implemented')">deletion policy</a>   
  			</td>
  		</tr>
  		<tr>
  			<td class="formLabel" colspan="2">Reason</td>
  		</tr>
  		<tr>
  			<td  colspan="2">
  				<input type="checkbox" /> It belongs in personal history<br/>	  			
  				<input type="checkbox" /> It belongs in fictional literature<br/>	  			
  				<input type="checkbox" /> It is totally fake, just remove it<br/>	  			
			</td>
  		</tr>
  		<tr>
  			<td>Comment</td>
  			<td>
  				
  			</td>
  		</tr>
  		
  	</table>
		<input type="submit" value="Submit to Administrators"/>
	</div>
</div>

</body>
</html>
